<template>
  <div>
    <el-container class="container-box">
      <el-main class="container-content">
        <div>
          <el-tabs type="border-card" @tab-change="start" v-model="activeName">
            <el-tab-pane :lazy="true" :name="TABSNAME.TEAM" label="团队比赛">
            </el-tab-pane>
            <el-tab-pane :lazy="true" :name="TABSNAME.PUBLIC" label="公开比赛">
            </el-tab-pane>
            <div class="match-search-btn">
              <el-button size="default" type="primary" @click="start"
                >刷新</el-button
              >
            </div>
            <el-table
              class="match-list-table"
              stripe
              row-class-name="cursor-pointer"
              :data="activityData"
              @row-click="selectActivity"
              style="width: 100%"
              header-row-class-name="table-header"
            >
              <template v-slot:empty>
                <el-empty
                  image="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/image/ojSass-empty.png"
                />
              </template>
              <el-table-column
                prop="name"
                label="比赛名"
                show-overflow-tooltip
                width=""
              >
                <template #default="{ row }">
                  <span class="match-list-table-match-name">{{
                    row.name
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="date" label="状态" width="100">
                <template #default="{ row }">
                  <el-tag
                    class="question-intable-label"
                    :type="jianchatime(row, datenow).type"
                    effect="dark"
                    size="default"
                  >
                    {{ jianchatime(row, datenow).text2 }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="type" label="比赛类型" width="100">
                <template #default="{ row }">
                  {{ row.type === "public" ? "公开" : "非公开" }}
                </template>
              </el-table-column>
              <el-table-column prop="format" label="比赛赛制" width="100">
              </el-table-column>
              <el-table-column
                prop="date"
                label="比赛时间"
                show-overflow-tooltip
                width=""
              >
                <template #default="{ row }">
                  {{ TimeYH1(row.activitystarttime) }}
                  -
                  {{ TimeYH1(row.activityendtime) }}
                </template>
              </el-table-column>
              <el-table-column
                prop="date"
                label="比赛时长"
                width="100"
                :formatter="formatterDuration"
              ></el-table-column>
              <el-table-column prop="date" label="计时方式" width="">
                <template #default="{ row }">
                  {{ row.duration ? "个人计时" : "统一计时" }}
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
              class="pager"
              size="default"
              :page-size="limit"
              :total="totalCount"
              @current-change="changePage"
              layout="total,prev, pager, next"
              :current-page="Math.floor(offset / limit) + 1"
            >
            </el-pagination>
          </el-tabs>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script setup lang="ts">
import { ElMessage } from "element-plus";
import { debounce } from "underscore";
import { computed, inject, onMounted, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { asyncselectactivity, asyncTeamSelectActivity } from "../../../api";
import { Storekey } from "../../../interface";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import { TimeYH1 } from "../../../util/time";
import { jianchatime } from "@/util/jianchatime";

// 码客行
const tenant_id = inject<string | undefined>("tenant_id", undefined);

//
enum TABSNAME {
  TEAM = "team",
  PUBLIC = "public",
}

const store = useStore(Storekey);
const route = useRoute();
const router = useRouter();

const user = computed(() => {
  return store.state.user;
});
const teamid = computed(() => {
  return user.value?.teamid;
});
// 监听团队切换
watch(
  () => teamid.value,
  (o, n) => {
    if (o !== n) start();
  }
);

const activeName = ref(TABSNAME.TEAM);

const datenow = computed(() => {
  return store.state.time;
});
// 搜索条件
const offset = ref(Number(route.query.offset) || 0);
const limit = computed(() => {
  return Number(route.query.limit) || 20;
});

const activityData = ref<Studycodemodel.Iactivity[]>([]);
const totalCount = ref<number>(0);
onMounted(() => {
  start();
});
const debouncet1 = ref(debouncet());
function start() {
  debouncet1.value();
}
function debouncet() {
  return debounce(async () => {
    // 判断码客行,码客行可以看所有比赛
    if (activeName.value === TABSNAME.PUBLIC) {
      const { rows, count } = await asyncselectactivity({
        tenant_id, // 码客行
        _limit: limit.value,
        _offset: offset.value,
      });
      activityData.value = rows;
      totalCount.value = count;
    } else {
      await asyncTeamSelectActivity({
        tenant_id, // 码客行
        teamid: teamid.value,
        _limit: limit.value,
        _offset: offset.value,
      })
        .then(({ rows, count }) => {
          activityData.value = rows;
          totalCount.value = count;
        })
        .catch((err) => {
          activityData.value = [];
          totalCount.value = 0;
        });
    }
  }, 300);
}

function changePage(r: number) {
  offset.value = (r - 1) * limit.value;
}

// formatter
function time(a: Date, b: Date) {
  const t = new Date(b).getTime() - new Date(a).getTime();
  let n: string | number = (t / 60 / 60 / 1000).toFixed(1);
  if (Number(n) === Math.floor(Number(n))) {
    n = Math.floor(Number(n));
  }
  return n + "小时";
}
function formatterDuration(row: Studycodemodel.Iactivity) {
  return row.duration
    ? `${(row.duration / 60).toFixed(1)}小时`
    : time(row?.activitystarttime!, row?.activityendtime!);
}

function selectActivity(row: Studycodemodel.Iactivity) {
  // 跳转详情页面
  const to = { name: "比赛详情", params: { ID: row.ID } };
  router.push(to);
  return;
}
</script>

<style scoped>
.container-box {
  padding: var(--container-margin) 1.5% 0;
  margin: var(--container-margin) 0rem 0 0rem;
  /* 外边距 */
  --container-margin: 6px;
  --container-header-height: 10vh;
  --container-bg-color: #fff;
}

.container-header {
  height: var(--container-header-height);
  min-height: var(--container-header-height);
  background: var(--container-bg-color);
  width: 100%;
  padding: 0;
}

.container-content {
  background: var(--container-bg-color);
  padding: 0;
  /* padding: var(--container-margin); */
  min-width: 100%;
}

.container-content .pager {
  margin: var(--container-margin);
  margin-right: 0;
  margin-bottom: 0;
  float: right;
}

.match-search-btn {
  margin: var(--container-margin) 0;
}

.match-list-table {
  margin-top: var(--container-margin);
}

.match-list-table-match-name {
  color: #000;
}

/* 状态 */
.info,
.primary,
.danger,
.success {
  width: 44px;
  height: 24px;
  color: #fff;
  display: inline-block;
  text-align: justify;
  font-size: 12px;
  font-weight: 400;
  line-height: 24px;
  text-align: center;
  border-radius: 5px;
}

/* 赛事结束-已结束 */
.info {
  background-color: rgba(236, 128, 141, 1);
}

/* 立即报名-报名中 */
.primary {
  background: rgb(112, 182, 3);
  /* transform: translateY(-3px); */
}

/* 即将开赛-未开始 */
.danger {
  background: rgb(170, 170, 170);
  /* transform: translateY(-3px); */
}

/* 进入比赛-比赛中 */
.success {
  background: var(--color-cheng);
  /* transform: translateY(-3px); */
}
</style>

<style></style>
